// THEME INDEPENDENT STYLES

html {
  height: 100%;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--background);
}

#mainWrapper .react {
  // justify all inputs of form to the right in the modal footer
  .ant-modal-footer  .ant-form-inline {
    justify-content: flex-end;
  }

  // set smaller text for the FormItem.extra text
  .ant-form-item-extra {
    margin-top: 6px;
    font-size: 11px;
    font-style: italic;
  }

  // Use primary color for required marks
  label.ant-form-item-required::before {
    color: var(--primary);
  }

  // remove transitions from hover states of inputs
  .ant-select-selector:hover,
  .ant-input:hover {
    transition: none;
  }

  // remove primary color from focused buttons
  .ant-btn:hover:not(.ant-btn-primary, .ant-btn-text),
  .ant-btn:focus:not(.ant-btn-primary, .ant-btn-text) {
    border-color: var(--button);
  }

  // make placeholder text dimmer
  .ant-input::placeholder {
    opacity: 0.5;
  }
  .ant-select-selection-placeholder {
    opacity: 0.5;
  }

  // change colors of dangerous button
  .ant-btn-dangerous {
    color: var(--paragraph);
    background-color: var(--red);
    &:hover,
    &:focus {
      background-color: var(--red-semi);
      border-color: var(--red);
    }
  }

  // allow buttons to be placed after inputs without jank
  .ant-input-group-addon {
    border: 0;

    .ant-btn {
      margin: 0px -11px;
      border-radius: 0 4px 4px 0;
    }
  }

  // disable unnecessary animation in checkboxes
  .ant-checkbox-inner,
  .ant-checkbox-inner::after, {
    transition: none;
  }
  .ant-checkbox-checked::after {
    animation: none;
  }

  // get rid of weird white box in text area
  .os-scrollbar-corner,
  ::-webkit-scrollbar-corner,
  ::-webkit-resizer {
    background: transparent !important;
  }

  .os-content-glue {
    height: 100% !important;
    width: 100% !important;
  }
}

// set a "text-style" cursor for file inputs instead of "disabled"
.ant-input.ant-input-disabled[data-type="file"] {
  cursor: text;
}


// fix list input label wrapping with long names
.ant-select-selection-item {
  .ant-row {
    flex-flow: nowrap;
    overflow: hidden;
  }

  .ant-col:first-of-type {
    flex-shrink: 0;
  }
}

// change text color on solid background radio buttons
div.ant-radio-group-solid {
  > label.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
    color: var(--action-button-text) !important;
  }
}
